/**
 * Created by xt on 2017/3/30.
 */
import React, { Component } from 'react';

//导入echarts
var echarts = require('echarts/lib/echarts') //必须
require('echarts/lib/chart/funnel') //图表类型
require('echarts/lib/component/title') //标题插件

import {setFontSize} from '../../util'

class FunnelReact extends React.Component {

  constructor(props) {
    super(props)
    this.setFunnelOption = this.setFunnelOption.bind(this)
    this.initPie = this.initPie.bind(this)
  }

  initPie() {
    const { data } = this.props; //外部传入的data数据
    let myChart = echarts.init(this.refs.funnelChart) //初始化echarts

    //我们要定义一个setPieOption函数将data传入option里面
    let options = this.setFunnelOption(data);
    //设置options
    myChart.setOption(options)
  }

  componentDidMount() {
    this.initPie()
  }
  componentDidUpdate() {
    this.initPie()
  }

  render() {
    return (
      <div className="echart-react">
        <div ref="funnelChart" style={{width: "100%", height: "4.37rem"}}></div>
      </div>
    )
  }
  //一个基本的echarts图表配置函数
  setFunnelOption(data) {
    return {
      title: {
        text: '(考生人数)',
        textStyle: {
          fontSize: setFontSize(0.24),
          color: '#9B9B9B'
        },
        left: '23%'
      },
      color: ['rgba(65, 192, 228, 1)',
        'rgba(65, 192, 228, 0.8)',
        'rgba(65, 192, 228, .6)',
        'rgba(65, 192, 228, 0.4)',
        'rgba(65, 192, 228, 0.2)' ],
      series: [
        {
          type: 'funnel',
          left: '0',
          width: '60%',
          label: {
            normal: {
              position:'right',
              formatter: '{b}',
              textStyle: {
                fontSize:setFontSize(0.24),
                color: '#1b1b1b'
              }
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: setFontSize(.8),
              lineStyle: {
                color: '#D3D3D3 ',
                width: 2,
                type: 'solid'
              }

            }
          },

          data: [
            {value: '1', name: data[4].name},
            {value: '2', name: data[3].name},
            {value: '3', name: data[2].name},
            {value: '4', name: data[1].name},
            {value: '5', name: data[0].name}
          ]
        },
        {
          name: '实际',
          type: 'funnel',
          left: '0',
          width: '60%',
          maxSize: '100%',
          label: {
            normal: {
              position: 'inside',
              formatter: '{c}',
              textStyle: {
                color: '#fff',
                fontSize: setFontSize(0.20)
              }
            }

          },
          itemStyle: {
            normal: {
              opacity: 0
            }
          },
          data: [
            {value: data[4].people, name: ''},
            {value: data[3].people, name: ''},
            {value: data[2].people, name: ''},
            {value: data[1].people, name: ''},
            {value: data[0].people, name: ''}

          ]
        }
      ]
    };

  }
}
export default FunnelReact
